<template>
  <div class="test-container">
    <TopNavBar></TopNavBar>

    <h2>测试pinia持久化</h2>
    <p>{{ user }}</p>

    <h2>测试登录接口</h2>
    <van-button type="primary" @click="handleLogin">登录接口</van-button>
    <van-button type="primary" @click="handleLogout">退出登录</van-button>
    <p>{{ isLogin }}</p>

    <h2>测试路由</h2>
    <router-link to="/login">跳转到login页面</router-link>

    <h2>测试主题色</h2>
    <van-button type="primary" @click="toggleTheme">切换主题</van-button>

    <h2>国际化</h2>
    <p>{{ t('common.hello') }}</p>
    <van-button @click="toggleLang">{{ t('common.changeLang') }}</van-button>
    <van-field v-model="textVal" :label="t('user.nickname')" :placeholder="t('user.welcome')" />
    <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    />

    <h2>icon图标</h2>
    <SvgIcon icon-class="login-eye-on" />
    <SvgIcon icon-class="login-eye-off" />

    <h2>测试vueuse</h2>
    <div>
      <span>x:</span><span>{{ x }}</span>
    </div>
    <div>
      <span>y:</span><span>{{ y }} </span>
    </div>
    <UseMouse v-slot="{ x, y }"> UseMouse组件x: {{ x }} UseMouse组件y: {{ y }} </UseMouse>
    <h2>测试echarts</h2>
    <BaseEchart :options="option" height="400px" />

    <h2>测试websocket</h2>
    <div class="websocket-demo">
      <p>
        连接状态：<strong :style="{ color: isReady ? 'green' : 'red' }">{{
          isReady ? '已连接' : '未连接'
        }}</strong>
      </p>
      <van-field v-model="message" label="输入消息" placeholder="请输入要发送的内容" />
      <van-button type="primary" @click="handleSend" :disabled="!isReady">发送消息</van-button>
      <!-- 消息列表 -->
      <van-cell-group>
        <van-cell v-for="(msg, index) in messageList" :key="index" :title="msg" />
      </van-cell-group>

      <h2>测试画板</h2>
      <van-signature
        pen-color="#000"
        :line-width="3"
        type="png"
        @submit="onSignSubmit"
        @clear="onSignClear"
      />
      <van-image v-if="image" :src="image" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLocaleStore } from '@/stores/modules/locale'
import { useThemeStore } from '@/stores/modules/theme'
import { useUserStore } from '@/stores/modules/user'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
const { user, isLogin } = storeToRefs(useUserStore())
const { login, logout } = useUserStore()
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useMouse } from '@vueuse/core'
import { UseMouse } from '@vueuse/components'
import type { EChartsOption } from 'echarts'
import { useWebSocketClient } from '@/composables/useWebSocketClient'

// 路由器实例
const router = useRouter()

// 登录
const handleLogin = async () => {
  try {
    const res = await login({ username: 'admin', password: '123456', captcha: 'cccc' })
  } catch (error) {
    console.log(error)
  }
}

// 退出登录
const handleLogout = async () => {
  try {
    const res = await logout()
    router.replace('/login')
  } catch (error) {
    console.log(error)
  }
}

// 主题色
const { toggleTheme } = useThemeStore()

// 国际化
const { t, locale } = useI18n()
const textVal = ref('')
const currentPage = ref(1)
const { setLocale } = useLocaleStore()
const toggleLang = () => {
  setLocale(locale.value === 'zh-CN' ? 'en-US' : 'zh-CN')
}

// vueuse
const { x, y } = useMouse()

// echarts
const option: EChartsOption = {
  // 标题
  title: {
    text: '柱状图',
  },
  // 提示框
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: '{b0}: {c0}', // 提示框内容
  },
  // 图例
  legend: {
    data: ['语文', '数学'],
  },
  // 工具菜单
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false }, // 数据视图
      magicType: { show: true, type: ['line', 'bar'] }, // 动态类型切换
      restore: { show: true }, // 还原
      saveAsImage: { show: true }, // 保存为图片
      dataZoom: { show: true }, // 缩放
    },
  },
  // x轴
  xAxis: {
    type: 'category',
    data: ['张三', '李四', '王五', '赵六', '钱七', '孙八'],
  },
  // y轴
  yAxis: {
    type: 'value',
  },
  // 数据
  series: [
    {
      name: '语文',
      type: 'bar',
      data: [120, 100, 150, 80, 70, 110],
      markPoint: {
        data: [
          { type: 'max', name: '最高分' },
          { type: 'min', name: '最低分' },
        ],
      },
      markLine: {
        data: [{ type: 'average', name: '平均分' }],
      },
      label: {
        show: true,
      },
    },
    {
      name: '数学',
      type: 'bar',
      data: [80, 90, 100, 110, 120, 130],
      markPoint: {
        data: [
          { type: 'max', name: '最高分' },
          { type: 'min', name: '最低分' },
        ],
      },
      markLine: {
        data: [{ type: 'average', name: '平均分' }],
      },
      label: {
        show: true,
      },
    },
  ],
}

// websocket
const message = ref('')
// const { send, messageList, isReady } = useWebSocketClient('wss://echo.websocket.events', {
const { send, messageList, isReady, registerHandler } = useWebSocketClient('ws://localhost:3000', {
  isAutoReconnect: true,
  heartbeatMsg: 'ping',
})
// 发送消息给服务器
const handleSend = () => {
  if (message.value.trim()) {
    send(message.value)
    message.value = ''
  }
}
// 注册消息处理函数
registerHandler('90', (msg) => {
  console.log('90 90 90 90 90 90 90 90：', msg)
})

// 画板
const image = ref('')
const onSignSubmit = (data: any) => {
  image.value = data.image
}
const onSignClear = () => {
  image.value = ''
  showToast('clear')
}
</script>

<style lang="scss" scoped>
.test-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto; // 只允许内部滚动（如果内容真的超出）
  padding-top: var(--van-nav-bar-height);
}
</style>
